<template>
  <div style="width:100%;height: 100%;background-color: #020327 ">
    <div class="threeD_box">
      <div id="3d"
           style="background-color: #000; width: 100%; height: 70%; margin-bottom: 2px;"></div>
      <div id="sliceX"
           style="border-top: 2px solid yellow; background-color: #000; width: 32%; height: 30%; float: left;"></div>
      <div id="sliceY"
           style="border-top: 2px solid red;background-color: #000; width: 32%; height: 30%; float: left;"></div>
      <div id="sliceZ"
           style="border-top: 2px solid green; background-color: #000; width: 32%; height: 30%; float: left;"></div>
      <div id="gui_controller" class="gui_controller">
        <div id="gui_box">

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {onMounted, ref} from "vue";
import router from "@/router";
import Analysis from "@/components/analysis/Label"
import {useRoute} from "vue-router/dist/vue-router";
import {ArrowRightBold} from "@element-plus/icons-vue";

export default {
  name: "ThreeViews",
  components:{
    Analysis
  },
  setup(){
    const drawer = ref(false)
    const direction = ref('ltr')

    const radio = ref("2D三视图")

    let isDragging = false // 标记元素是否正在被拖拽
    let mouseOffset = { x: 0, y: 0 };

    onMounted(async () => {
      const route = useRoute()
      console.log(route.params.type)

      if(route.params.type == 0){
        console.log(123)
        await run('http://localhost:8080/webPage/download/mesh?filename=image.nii.gz');
      }else{
        await run('http://localhost:8080/webPage/download/mesh?filename=123141.nii.gz');
      }
      // // if(route.params)

    });

    function run(path) {
      console.log(123)
      let _webGLFriendly = true;

      let threeD = new X.renderer3D();
      threeD.container = '3d';
      threeD.init();

      let sliceX = new X.renderer2D();
      sliceX.container = 'sliceX';
      sliceX.orientation = 'X';
      sliceX.init();
      // .. for Y
      let sliceY = new X.renderer2D();
      sliceY.container = 'sliceY';
      sliceY.orientation = 'Y';
      sliceY.init();
      // .. and for Z
      let sliceZ = new X.renderer2D();
      sliceZ.container = 'sliceZ';
      sliceZ.orientation = 'Z';
      sliceZ.init();

      let volume = new X.volume();
      //
      volume.file = path;
      sliceX.add(volume);

      sliceX.render();

      sliceX.onShowtime = function () {

        //
        // add the volume to the other 3 renderers
        //
        sliceY.add(volume);
        sliceY.render();
        sliceZ.add(volume);
        sliceZ.render();

        if (_webGLFriendly) {
          threeD.add(volume);
          threeD.render();
        }

        let gui = new dat.GUI();
        const guiController = document.getElementById('gui_box')
        guiController.appendChild(gui.domElement);

        let volumegui = gui.addFolder('工具箱');
        let vrController = volumegui.add(volume, 'volumeRendering');
        // .. configure the volume rendering opacity
        let opacityController = volumegui.add(volume, 'opacity', 0, 1);
        // .. and the threshold in the min..max range
        let lowerThresholdController = volumegui.add(volume, 'lowerThreshold',
            volume.min, volume.max);
        let upperThresholdController = volumegui.add(volume, 'upperThreshold',
            volume.min, volume.max);
        let lowerWindowController = volumegui.add(volume, 'windowLow', volume.min,
            volume.max);
        let upperWindowController = volumegui.add(volume, 'windowHigh', volume.min,
            volume.max);
        let sliceXController = volumegui.add(volume, 'indexX', 0,
            volume.range[0] - 1);
        let sliceYController = volumegui.add(volume, 'indexY', 0,
            volume.range[1] - 1);
        let sliceZController = volumegui.add(volume, 'indexZ', 0,
            volume.range[2] - 1);
        volumegui.open();
      }
    }

    return {
      radio,
      drawer,
      direction,
      ArrowRightBold
    }
  }
}
</script>

<style scoped>
.gui_controller{
  width: 272px;
  height: 65px;
  position: fixed;
  right: -5px;
  text-align: center;
  top: 100px;
  z-index:99999;
}
.threeD_box{
  background-color: #000;
  padding: 0;
  height: 100%;
  overflow: hidden;
  width:100%;
  margin: auto;
}
.analysis_controller{
  position: fixed;
  top: 280px;
  word-wrap: break-word;
  width: 30px;
  border-radius: 0 10px 10px 0;
  text-align: center;
}
.analysis_box{
  width: 450px;
  height: 95%;
  background-color: #020327;
}
</style>